import React, { Component } from 'react';
import axios from 'axios';
// 页面重定向组件
import { Redirect } from 'react-router-dom';
import './style.css';

// 闪现是由于一开始，登录状态默认设置为true，VIP页面展示，
// 随着脚本往下读，从后台获取真实登录状态为false，然后页面回到首页。也就是出现了页面加载的延迟
class Vip extends Component {

    constructor(props) {
        super(props);
        this.state = {
            login: true, // 登录状态，默认为true
            fetchFinish: false // 接口是否获取完毕数据，默认为false，解决未登录情况下 点击vip 页面闪现
        }
    }

    render() {
        if (this.state.login) { // 登录状态下展示登录界面
            if (this.state.fetchFinish) { // 接口数据获取完毕再加载
                return <div className='vip'>Vip</div>
            } else {
                return <div className='vip'>正在判断用户登录状态...</div>
            }  
        } else { // 未登录状态重定向，展示跟路径页面
            return <Redirect to='/' />
        }
    }

    // 判断是否为登录状态
    componentDidMount() {
        axios.get('http://www.dell-lee.com/react/api/isLogin.json', {
            withCredentials: true
        })
            .then(res => {
                const login = res.data.data.login;
                this.setState({ 
                    login,
                    fetchFinish: true
                });
                // console.log(login);
            })
    }
}

export default Vip;